ひとりNavigation API Advent Calendar 10日目
https://gyazo.com/93c6a5adc077b718d788c58fab05084c
これはひとりNavigation API Advent Calendarの10日目です。
10日目にして、いよいよNavigation APIに触れていくわよ！
@akfm_sato: 熱量がすごそう👀
Navigation APIずっと待ってた、特にずっとkeyが欲しかった
Safariは次のマイナーで入りそうなんだったっけ？
来年はNavigation API元年
https://qiita.com/advent-calendar/2025/navigation-api
昨日akfmさんにも捕捉されてしまいました
ひとりNavigation API Advent Calendar 03日目より1次情報を見ていく
HTML Living Standardを見ていく
navigation.entries()で履歴が見れる
archives.yamanoku.netにアクセスしたときのnavigation.entries()
code:json
[
{
id: "b217aa5a-8552-48e8-b46b-4a607602db99"
index: 0
key: "238cbe80-4c33-43f9-baa6-ed702f4eb9de"
ondispose: null
sameDocument: false
url:"https://archives.yamanoku.net/"
},
]
NavigationHistoryEntryインスタンス情報が配列で追加されている
code:Web IDL
interface NavigationHistoryEntry : EventTarget {
readonly attribute USVString? url;
readonly attribute DOMString key;
readonly attribute DOMString id;
readonly attribute long long index;
readonly attribute boolean sameDocument;
any getState();
attribute EventHandler ondispose;
};
event.url
ナビゲーション履歴エントリのURL
エントリが現在のドキュメントとは異なるDocumentに対応する場合（つまり、sameDocumentがfalseの場合）、そしてそのDocumentが"no-referrer"または"origin"のリファラーポリシーで取得された場合、このプロパティはnullを返すことがある
これは、問題あるDocumentが、同一オリジン内の他のページに対してもURLを隠蔽していることを示す
event.key
このナビゲーション履歴エントリが、ナビゲーション履歴リストのどこに位置するかを示す、ユーザーエージェントによって生成されたランダムなUUID文字列
この値は、「replace」によるナビゲーションでこのエントリが別の NavigationHistoryEntryインスタンスに置き換えられた場合、そのインスタンスによって再利用されます。また、リロードやセッションの復元後も維持されます。
navigation.traverseTo(key) を使用して、ナビゲーション履歴リスト内のこのエントリに戻る場合に役立つ
entry.id
この特定のナビゲーション履歴エントリを表す、ユーザーエージェントによって生成されたランダムなUUID文字列
この値は、他のNavigationHistoryEntryインスタンスで再利用されることはなく、リロードやセッションの復元後も保持される
これは、他のストレージAPIを使用して、このナビゲーション履歴エントリにデータを関連付ける場合に役立つ
entry.index
このNavigationHistoryEntryがnavigation.entries()内で持つインデックス
もしそのエントリがナビゲーション履歴エントリリストに存在しない場合は-1
entry.sameDocument
このナビゲーション履歴のエントリが、現在のドキュメントと同じドキュメントのものかどうかを示す
例えば、フラグメントナビゲーションやSPAのナビゲーションを表す場合にtrue
entry.getState()
このエントリーに保存されている状態のデシリアライズ結果を返す
この状態は、navigation.navigate() または navigation.updateCurrentEntry() を使用してエントリーに追加されたもの
この状態は、リロードやセッションの復元後も保持される
一般的に、状態の値がプリミティブでない限り、entry.getState() !== entry.getState() となることに注意してください
毎回新しいデシリアライズ結果が返されるため
この状態は、従来のHistory APIの history.state とは関係ない
navigation.currentEntry ... 現在の履歴エントリを読み込む
navigation.updateCurrentEntry({ state }) ... stateによって現在の履歴エントリを更新させる
この場合画面遷移などは起こらない
すでに発生したページへの更新をキャプチャし、それをNavigation APIの状態に反映する必要がある場合に最適
navigation.canGoBack ... 履歴エントリが最初でない場合に true、そうでなければfalse
navigation.canGoForward ... 履歴エントリ最後でない場合に true、そうでなければfalse
初期ページの状態の場合はそれぞれfalseを返す
navigation.reload(options) ... 再読み込み
navigation.forward(key, { info }) ... 先に進む
navigation.back(key, { info }) ...前に戻る
navigation.navigate(url, options) ... urlを入力して該当のページへ遷移
navigation.traverseTo(key, { info }) ... NavigationHistoryEntryのkeyで対象のURLに遷移
上記メソッドたちは{ committed, finished }のPromiseインスタンスをもつオブジェクトを返す
yamanoku.icon finishedは完了したときってわかるがcommittedはなんなんだ…
code:js
// The committed promise will fulfill once the URL has changed, which happens
// immediately (as long as the NavigateEvent wasn't canceled).
await committed;
曰く
committedのPromiseは、URLが変更されるとすぐにresolveされます
なのでURLだけが切り替わったらresolve
finishedはすべてのページ読み込み・表示が完了したらresolveされる
yamanoku.icon commitedの命名はどこからきたんだろうか
options には以下の値を設定できる
history: "replace" を設定すると、新しい履歴を追加する代わりに、現在のセッション履歴のエントリを置き換える
info: 任意の値が設定できる。対応する NavigateEvent の info プロパティに設定される
state: シリアライズ可能な任意の値が設定できる。これは、同じドキュメント内での遷移が完了した際に、navigation.currentEntry.getState() で取得できる state に設定される（異なるドキュメントへの遷移の場合は無視される）
今日はここまで。明日もNavigationインターフェイスを引き続き見ていく。